<template>
  <div class="card content">
    <h2 class="setting-header">
      <strong>{{ props.title }}</strong>
    </h2>
    <div class="search-wrap">
      <div class="left-btns">
        <div class="state">
          <span>问卷类型：</span>
          <el-select v-model="searchForm.qsType" style="width: 120px" @change="handleQsTypeChange">
            <el-option v-for="item in qsTypeOption" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div class="state" v-if="!props.isRecycle">
          <span>发布状态：</span>
          <el-select v-model="searchForm.status" style="width: 120px" @change="handleStatusChange">
            <el-option v-for="item in qsStatusOption" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div class="state">
          <span>排序：</span>
          <el-select v-model="searchForm.sort" style="width: 120px" @change="handleSortChange">
            <el-option v-for="item in sortOption" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
      </div>
      <div class="search">
        <el-input placeholder="输入内容标题或正文关键词" @keydown.enter="handleGetFormManageList" v-model="searchForm.searchText">
          <template #suffix>
            <i class="iconfont" @click="handleGetFormManageList">&#xe643;</i>
          </template>
        </el-input>
      </div>
    </div>
    <div class="qs-list-box" v-loading="qsListLoading">
      <div class="qs-list-item" v-for="(listItem, listIndex) in qsList" :key="listIndex">
        <div class="top">
          <div class="top-left flex-row">
            <div class="collect" @click="handleCollect(listItem)">
              <span :title="listItem.isCollect === 1 ? '取消收藏' : '收藏'" class="collect-btn" :class="{ 'is-collect': listItem.isCollect === 1 }">
                <i class="iconfont">&#xe68c;</i>
              </span>
            </div>
            <div class="type">
              <i class="iconfont" :style="{ color: listItem.iconColor }" v-html="listItem.typeIcon"></i>
            </div>
            <div class="title" :title="listItem.title">
              <span>{{ listItem.title }}</span>
            </div>
          </div>
          <div class="top-right flex-row">
            <span class="nomal-label">创建人：{{ listItem.userName }}</span>
            <span class="nomal-label">创建时间：{{ listItem.publishTime }}</span>
            <span class="answer-num">
              <span class="answer-label">收到答卷：</span>
              <span class="curAnswerNum" :style="{ color: listItem.statusInfo.color }">{{ listItem.curAnswerNum }}</span>
              <span class="answerNum">
                /
                <span v-if="listItem.answerNum">{{ listItem.answerNum }}</span>
                <span v-else class="no-num-limit">无限制</span>
              </span>
            </span>
            <div class="status">
              <el-tag :style="{ background: listItem.statusInfo.backgroudColor, color: '#fff' }">{{ listItem.statusInfo.label }}</el-tag>
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="bottom-left flex-row">
            <div>
              限时发布：
              <span v-if="listItem.limitTime?.length > 0">{{ listItem.limitTime[0] }} - {{ listItem.limitTime[1] }}</span>
              <span v-else>无限制</span>
            </div>
            <div>
              访问权限：
              <span v-if="listItem.permission">{{ listItem.permission }}</span>
              <span v-else>无限制</span>
            </div>
          </div>
          <div class="bottom-right flex-row">
            <template v-if="searchForm.listType != 5">
              <!-- status: 0待审核，1审核中，2发布，3审核不通过，4下线, 5草稿 100全部 51即将下线-->
              <!-- listType: 1我发布的 2我协作的 3我的草稿 4我的收藏 5回收站 -->
              <div class="audit"  v-permission="['form:manage:list:audit', 'form:my:list:audit']" v-if="[3].indexOf(searchForm.listType) == -1">
                <div class="btn" v-if="[0, 1].indexOf(listItem.status) != -1" @click="handlePreview(listItem, '审核')">
                  <i class="iconfont">&#xe6db;</i>
                  <span>审核</span>
                </div>
              </div>
              <div class="open-or-close" v-permission="['form:manage:list:open', 'form:my:list:open']" v-if="[0, 1].indexOf(listItem.status) == -1 && [3].indexOf(searchForm.listType) == -1">
                <div class="btn" v-if="[0, 1, 2, 51].indexOf(listItem.status) != -1" @click="handleChangeFormStatus(listItem, 4)">
                  <i class="iconfont">&#xe60a;</i>
                  <span>下线</span>
                </div>
                <div class="btn" v-else @click="handleChangeFormStatus(listItem, 2)">
                  <i class="iconfont">&#xe647;</i>
                  <span>开启</span>
                </div>
              </div>
              <div v-permission="['form:manage:statistics:share', 'form:my:statistics:share']" class="btn" v-if="[3].indexOf(searchForm.listType) == -1" @click="handleShowShare(listItem)">
                <i class="iconfont">&#xe7c5;</i>
                生成链接
              </div>
              <div v-permission="['form:manage:statistics', 'form:my:statistics']" class="btn" v-if="[3].indexOf(searchForm.listType) == -1" @click="handleShowStatistics(listItem)">
                <i class="iconfont">&#xe856;</i>
                统计
              </div>
              <div v-permission="['form:manage:design:edit', 'form:my:design:edit']" class="btn" @click="editForm(listItem)" :class="listItem.curAnswerNum ? 'btn-disabled' : ''">
                <i class="iconfont">&#xe66e;</i>
                编辑
              </div>
              <div class="btn">
                <el-dropdown class="el-dropdown-box">
                  <i class="iconfont more">&#xe6dc;</i>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item>
                        <span @click="handlePreview(listItem, '预览')">
                          <i class="iconfont">&#xe6ee;</i>
                          预览
                        </span>
                      </el-dropdown-item>
                      <el-dropdown-item v-if="hasPermission(['form:manage:design:copy', 'form:my:design:copy'])">
                        <span @click="handleCopy(listItem)">
                          <i class="iconfont">&#xe8b0;</i>
                          复制
                        </span>
                      </el-dropdown-item>
                      <el-dropdown-item v-if="hasPermission(['form:manage:list:record', 'form:my:list:record'])">
                        <span @click="handleGetFormoOperationLog(listItem)">
                          <i class="iconfont">&#xe617;</i>
                          操作记录
                        </span>
                      </el-dropdown-item>
                      <el-dropdown-item v-if="hasPermission(['form:manage:list:export', 'form:my:list:export'])">
                        <span @click="handleExport(listItem)">
                          <i class="iconfont">&#xe70c;</i>
                          导出
                        </span>
                      </el-dropdown-item>
                      <el-dropdown-item v-if="hasPermission(['form:manage:list:delete', 'form:my:list:delete'])">
                        <span @click="handleFormDelete(listItem)">
                          <i class="iconfont">&#xe718;</i>
                          删除
                        </span>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </template>
            <!-- 回收站 -->
            <template v-else>
              <div class="btn" v-permission="['form:manage:list:delete', 'form:my:list:delete']" @click="handleRestore(listItem)">
                <i class="iconfont">&#xe67b;</i>
                恢复
              </div>
              <div class="btn" v-permission="['form:manage:list:delete', 'form:my:list:delete']" @click="handleRecycleDelete(listItem)">
                <i class="iconfont">&#xe718;</i>
                删除
              </div>
            </template>
          </div>
        </div>
      </div>
      <el-empty v-if="!qsList?.length" description="暂无数据" />
    </div>
    <PaginationViewSimple :total="searchForm.total" :pageSize="searchForm.pageSize" :currentPage="searchForm.currentPage" @changeSize="handleSizeChange" @currentChange="handleCurrentChange" />
    <!-- 操作记录列表 -->
    <el-dialog v-model="showFormoOperationLog" class="his-version-dialog" title="操作记录" width="1000px" :align-center="true" :close-on-press-escape="false" :close-on-click-modal="false">
      <el-table ref="multipleTableRef" v-loading="formoOperationLogLoading" :data="formoOperationLog" style="width: 100%">
        <el-table-column property="versionCode" label="版本号" />
        <el-table-column property="userName" label="操作人员" />
        <el-table-column property="publishTime" label="操作时间" />
      </el-table>
      <PaginationViewSimple
        :total="formoOperationLogParams.total"
        :pageSize="formoOperationLogParams.pageSize"
        :currentPage="formoOperationLogParams.currentPage"
        @changeSize="handleOperationLogSizeChange"
        @currentChange="handleOperationLogCurrentChange"
      />
    </el-dialog>
    <!-- 生成（分享） -->
    <el-dialog v-model="showShare" v-if="showShare" class="share-dialog" title="分享" width="1000px" :align-center="true" :close-on-press-escape="false" :close-on-click-modal="false">
      <formShare v-if="showShare" :curShareFormId="encrypt(curForm.id)" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showShare = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 统计 -->
    <el-dialog v-model="showStatistics" :title="curForm.title + '统计'" width="1000px" :align-center="true">
      <formStatistics v-if="showStatistics" :formId="curForm.id" />
    </el-dialog>
    <!-- 预览 -->
    <el-dialog v-model="showPreview" title="问卷预览" width="875px" align-center class="preview-dialog">
      <FormEcho :formData="preViewFormInfo" height="65vh" :disabled="false" :showDevice="true" />
      <template #footer v-if="previewText == '审核'">
        <span class="dialog-footer">
          <el-button @click="handleChangeFormStatus(curForm, 2)" type="primary">通过</el-button>
          <el-button @click="handleChangeFormStatus(curForm, 3)" type="">不通过</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 发布或关闭 -->
    <el-dialog v-model="timeSetDialog" title="限制有效时间" width="30%" align-center :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" class="time-dialog">
      <div style="width: 100%">
        <el-form-item label="限制开始时间：">
          <el-date-picker v-model="limitTime[0]" :disabled-date="disabledDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>
        <el-form-item label="限制结束时间：">
          <el-date-picker v-model="limitTime[1]" :disabled-date="disabledDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="timeLimitConfirm(false)">不限制</el-button>
          <el-button type="primary" @click="timeLimitConfirm(true)">确认</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="showExportProgress" title="统计导出中..." :show-close="false" :close-on-press-escape="false" :close-on-click-modal="false" :center="true" align-center width="500px">
      <div>
        <el-progress :stroke-width="20" :percentage="exportPercentage" :status="exportPercentage === 100 ? 'success' : ''" />
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import {
  getFormManageList,
  formDelete,
  changeFormStatus,
  getFormOperationLog,
  getCurFormInfo,
  formCollect,
  getFormTypeList,
  formRestore,
  recycleDelete,
  updatePublishSetting,
  getFormAnalysisData
} from '@/api/formDesign'
import { ElMessageBox, ElMessage } from 'element-plus'
import formShare from '@/views/form/manage/components/share/formShare.vue'
import formStatistics from '@/views/form/manage/components/statistics/formStatistics.vue'
import { FormEcho } from '@ruifox-cms/components'
import { encrypt } from '@ruifox-cms/utils'
import { export2Excel } from '@/utils/export'
import { hasPermission } from '@ruifox-cms/utils'
const store = useStore()
const router = useRouter()
const props = defineProps({
  title: {
    type: String,
    default: '问卷管理'
  },
  isRecycle: {
    type: Boolean,
    default: false
  },
  defaultQuery: {
    type: Object,
    default: () => {
      return {
        searchText: '', //关键词
        status: 100, //状态 0待审核，1审核中，2发布，3审核不通过，4下线, 5草稿
        qsType: 0, //问卷类型
        sort: 0, //排序
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    }
  }
})
const curForm = ref({})
const searchForm = ref(JSON.parse(JSON.stringify(props.defaultQuery)))
const qsStatusOption = ref([
  //状态字体和按钮样式
  { label: '全部', value: 100 },
  { label: '待审核', value: 0, backgroudColor: '#ee7755', color: '#2CBF77' },
  { label: '审核中', value: 1, backgroudColor: '#ee7755', color: '#2CBF77' },
  { label: '已发布', value: 2, backgroudColor: '#2CBF77', color: '#2CBF77' },
  { label: '未通过', value: 3, backgroudColor: '#F00', color: '#2CBF77' },
  { label: '已下线', value: 4, backgroudColor: '#AAAAAA', color: '#FF9700' },
  { label: '草稿', value: 5, backgroudColor: '#AAAAAA', color: '#FF9700' },
  { label: '即将下线', value: 51, backgroudColor: '#FF9700', color: '#FF9700' }
])
const sortOption = ref([
  { label: '默认', value: 0 },
  { label: '发布时间降序', value: 1 },
  { label: '发布时间升序', value: 2 }
])
const qsTypeOption = ref([])
const handleGetFormTypelList = async () => {
  let res = await getFormTypeList()
  qsTypeOption.value = res.data.map(item => {
    return {
      label: item.title,
      value: item.id
    }
  })
  qsTypeOption.value.unshift({ label: '全部', value: 0 })
}
handleGetFormTypelList()
// 过滤状态信息
const filterStatus = status => {
  let obj = qsStatusOption.value.find(item => item.value == status)
  return obj
}
const qsList = ref()
const qsListLoading = ref(false)
// 筛选条件
const handleQsTypeChange = () => {
  handleGetFormManageList()
}
const handleStatusChange = () => {
  handleGetFormManageList()
}
const handleSortChange = () => {
  handleGetFormManageList()
}
// 获取列表
const handleGetFormManageList = async () => {
  qsListLoading.value = true
  let res = await getFormManageList(searchForm.value)
  qsList.value = res.data.list
  searchForm.value.total = res.data.total
  qsList.value = qsList.value.map(item => {
    return {
      ...item,
      statusInfo: filterStatus(item.status)
    }
  })
  qsListLoading.value = false
  store.dispatch('formDesignInfo/handleGetMyQsStatistics')
}
handleGetFormManageList()
const handleSizeChange = size => {
  searchForm.value.pageSize = size
  handleGetFormManageList()
}
const handleCurrentChange = page => {
  searchForm.value.currentPage = page
  handleGetFormManageList()
}
// 编辑
const editForm = row => {
  let toUrl = router.resolve({
    path: '/form/manage/design',
    query: {
      formId: encrypt(row.id),
      id: encrypt(row.qsType),
      qsTypeName: encrypt(qsTypeOption.value.find(item => item.value == row.qsType).label),
      status: row.status
    }
  })
  window.open(toUrl.href, '_blank')
}
// 删除
const handleFormDelete = row => {
  ElMessageBox.confirm('<div><p style="font-size: 16px;margin-bottom: 15px;">是否删除当前问卷？</p><span style="font-size: 14px;color: #FF5240;">删除后将移入回收站</span></div>', '删除确认', {
    dangerouslyUseHTMLString: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  }).then(async () => {
    let res = await formDelete({ formId: row.id })
    if (res.code == 20000) {
      ElMessage({
        showClose: true,
        message: '删除成功！',
        type: 'success'
      })
      handleGetFormManageList()
    }
  })
}
// 导出
const showExportProgress = ref(false)
const exportPercentage = ref(0)
const handleExport = async data => {
  /*
   * 1.分页获取统计数据（第一次确定 总数与进度条,字段结构）
   * 2.判断currentPage * pageSize < total 进行下一次分页
   * */
  let _params = {
    formId: data.id,
    status: 0,
    resource: 0,
    currentPage: 1,
    pageSize: 100
  }
  let res = await getFormAnalysisData(_params)
  let formProps = {
    status: '状态'
  }
  res.data.formAnalysisProp.forEach(item => {
    formProps[item.prop] = item.label
  })
  showExportProgress.value = true
  let formAnalysisData = res.data.list.formAnalysisData
  export2Excel(formAnalysisData, formProps, data.title + '_' + _params.currentPage + '.xlsx')
  function infGetFormAnalysis(params) {
    getFormAnalysisData(params).then(res => {
      export2Excel(res.data.list.formAnalysisData, formProps, data.title + '_' + params.currentPage + '.xlsx')
      if (res.data.currentPage * res.data.pageSize < res.data.total) {
        exportPercentage.value = Math.round((res.data.currentPage * res.data.pageSize * 100) / res.data.total)
        params.currentPage += 1
        infGetFormAnalysis(params)
      } else {
        exportPercentage.value = 100
        setTimeout(() => {
          showExportProgress.value = false
        }, 600)
      }
    })
  }
  if (res.data.currentPage * res.data.pageSize < res.data.total) {
    exportPercentage.value = Math.round((res.data.currentPage * res.data.pageSize * 100) / res.data.total)
    _params.currentPage += 1
    infGetFormAnalysis(_params)
  } else {
    exportPercentage.value = 100
    setTimeout(() => {
      showExportProgress.value = false
    }, 600)
  }
}
// 点击统计 跳转
const showStatistics = ref(false)
const handleShowStatistics = row => {
  curForm.value = row
  showStatistics.value = true
}
// 切换表单状态
const handleChangeFormStatus = (row, status) => {
  let text
  if (status == 1) text = '发布'
  else if (status == 2) text = '发布'
  else if (status == 3) text = '不通过'
  else if (status == 4) text = '下线'
  ElMessageBox.confirm(`<div><p style="font-size: 16px;margin-bottom: 15px;">是否${text}当前问卷？</p></div>`, `${text}确认`, {
    dangerouslyUseHTMLString: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  }).then(async () => {
    let res = await changeFormStatus({ formId: row.id, status })
    if (res.code == 20000) {
      ElMessage({
        showClose: true,
        message: `${text}成功！`,
        type: 'success'
      })
      showPreview.value = false
      //待审核情况下进行发布不需要再时间选择
      if (status !== 2 || row.status != 0) {
        handleGetFormManageList()
      } else {
        timeDialogOpen(row.id)
      }
    }
  })
}
//填写时间更新
const timeSetDialog = ref(false)
const disabledDate = time => {
  const currentDate = new Date() // 当前日期
  return time.getTime() < currentDate.getTime() // 返回true表示禁用
}
//打开设置弹窗，获取当前表单发布设置信息
const publishSetting = ref()
const updateFormId = ref()
const timeDialogOpen = async formId => {
  timeSetDialog.value = true
  updateFormId.value = formId
  let res = await getCurFormInfo({ formId: formId })
  publishSetting.value = res.data.publishSetting
  limitTime.value[0] = publishSetting.value.limitTime[0]
  limitTime.value[1] = publishSetting.value.limitTime[1]
}
const limitTime = ref([null, null])
const timeLimitConfirm = async limit => {
  if (limit) {
    publishSetting.value.useLimitTime = true
    publishSetting.value.limitTime = limitTime.value
  } else {
    publishSetting.value.useLimitTime = false
    publishSetting.value.limitTime = [null, null]
  }
  let params = {
    paperId: updateFormId.value,
    publishSetting: publishSetting.value
  }
  updatePublishSetting(params).then(res => {
    if (res.code === 20000) {
      ElMessage({
        showClose: true,
        message: `设置成功！`,
        type: 'success'
      })
    }
  })
  timeSetDialog.value = false
  handleGetFormManageList()
}

const showFormoOperationLog = ref(false)
const formoOperationLog = ref([])
const formoOperationLogLoading = ref(false)
const formoOperationLogParams = ref({
  formId: null,
  currentPage: 1,
  pageSize: 5,
  total: 0
})
// 查看操作记录
const handleGetFormoOperationLog = async row => {
  curForm.value = row
  showFormoOperationLog.value = true
  formoOperationLogLoading.value = true
  formoOperationLogParams.value.formId = curForm.value.id
  let res = await getFormOperationLog(formoOperationLogParams.value)
  formoOperationLog.value = res.data.list
  formoOperationLogParams.value.total = res.data.total
  formoOperationLogLoading.value = false
}
// 操作记录翻页
const handleOperationLogSizeChange = size => {
  formoOperationLogParams.value.pageSize = size
  handleGetFormoOperationLog(curForm.value)
}
// 操作记录翻页
const handleOperationLogCurrentChange = page => {
  formoOperationLogParams.value.currentPage = page
  handleGetFormoOperationLog(curForm.value)
}
// 生成链接
const showShare = ref(false)
const handleShowShare = row => {
  curForm.value = row
  showShare.value = true
}
// 预览
const showPreview = ref(false)
const preViewFormInfo = ref()
const preViewFormInfoLoading = ref(false)
const previewText = ref('')
const handlePreview = async (row, text) => {
  curForm.value = row
  previewText.value = text
  preViewFormInfoLoading.value = true
  let res = await getCurFormInfo({ formId: row.id })
  preViewFormInfo.value = res.data
  store.commit('formDesignInfo/SET_FORMINFO', res.data)
  preViewFormInfoLoading.value = false
  showPreview.value = true
}
// 复制
const handleCopy = row => {
  let toUrl = router.resolve({
    path: '/form/manage/design',
    query: {
      formId: encrypt(row.id),
      id: encrypt(row.qsType),
      qsTypeName: encrypt(qsTypeOption.value.find(item => item.value == row.qsType).label),
      isCopy: true
    }
  })
  console.log('toUrl', toUrl)
  window.open(toUrl.href, '_blank')
}
// 收藏
const handleCollect = async row => {
  let isCollect = row.isCollect == 1 ? 2 : 1
  let res = await formCollect({ formId: row.id, isCollect })
  if (res.code == 20000) {
    ElMessage({
      showClose: true,
      message: `操作成功！`,
      type: 'success'
    })
    handleGetFormManageList()
  }
}
// 恢复
const handleRestore = row => {
  ElMessageBox.confirm(`<div><p style="font-size: 16px;margin-bottom: 15px;">是否确定恢复？</p></div>`, `恢复确认`, {
    dangerouslyUseHTMLString: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  }).then(async () => {
    let res = await formRestore({ id: row.id })
    if (res.code == 20000) {
      ElMessage({
        showClose: true,
        message: `恢复成功！`,
        type: 'success'
      })
      handleGetFormManageList()
    }
  })
}
// 删除回收站
const handleRecycleDelete = row => {
  ElMessageBox.confirm(`<div><p style="font-size: 16px;margin-bottom: 15px;">是否确定删除？</p></div>`, `删除确认`, {
    dangerouslyUseHTMLString: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  }).then(async () => {
    let res = await recycleDelete({ id: row.id })
    if (res.code == 20000) {
      ElMessage({
        showClose: true,
        message: `删除成功！`,
        type: 'success'
      })
      handleGetFormManageList()
    }
  })
}

onMounted(() => {
  window['updateFormDesignList'] = val => {
    ElMessage({
      showClose: true,
      message: val,
      type: 'success'
    })
    handleGetFormManageList()
  }
})
defineExpose({
  handleGetFormManageList,
  searchForm
})
</script>
<style scoped lang="scss">
.card {
  margin-top: 10px;
  border-radius: 6px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
  padding: 20px 20px 30px;
  box-sizing: border-box;
  background-color: #ffffff;
  h2 {
    strong {
      font-size: 18px;
      font-weight: bold;
      margin-right: 20px;
    }
  }
}
.content {
  .search-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    .left-btns {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .state {
        margin-right: 10px;
      }
    }
    .search {
      i.iconfont {
        color: $mainColor;
        cursor: pointer;
      }
    }
  }
  .qs-list-box {
    margin-top: 30px;
    .qs-list-item {
      width: 100%;
      height: 100px;
      box-sizing: border-box;
      padding: 0 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      transition:
        background-color 0.2s,
        box-shadow 0.2s,
        border-color 0.2s;
      margin-bottom: 10px;
      &:hover {
        background-color: var(--el-color-primary-light-9);
        border-color: var(--el-color-primary-light-5);
        box-shadow: 0 0 10px var(--el-color-primary-light-9);
      }
      .top {
        height: 64px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px #e4e4e4 solid;
        .top-left {
          .collect-btn {
            margin-right: 8px;
            cursor: pointer;
            i {
              color: #d7d7d7;
            }
          }
          .is-collect {
            i {
              color: #ff9700;
            }
          }
          .type {
            margin-right: 8px;
            i {
              font-size: 20px;
            }
          }
          .title {
            font-size: 16px;
            line-height: 18px;
            color: #333;
            @include textEllipsis(18px, 1);
          }
        }
        .top-right {
          width: 580px;
          flex-shrink: 0;
          .nomal-label,
          .answer-num {
            margin-right: 20px;
            color: #797979;
            font-size: 14px;
            .answer-label {
              color: #333333;
            }
            .no-num-limit {
              font-size: 12px;
            }
          }
        }
      }
      .bottom {
        height: calc(100% - 64px);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .bottom-left {
          div {
            font-size: 14px;
            color: #797979;
            margin-right: 10px;
          }
        }
        .bottom-right {
          font-size: 14px;
          .btn {
            color: #333;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-left: 20px;
            cursor: pointer;
            i {
              color: $mainColor;
              margin-right: 3px;
            }
            .more {
              font-size: 30px;
            }
          }
          .el-dropdown-box {
            i {
              color: $mainColor;
            }
          }
          .btn-disabled {
            user-select: none;
            pointer-events: none;
            color: #999;
          }
        }
      }
      .flex-row {
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
  }
}
::v-deep(.share-dialog) {
  .el-dialog__body {
    padding: 0 10px;
  }
  .container {
    height: 75vh;
  }
}
::v-deep .time-dialog .el-date-editor.el-input {
  width: 100%;
  .el-input__wrapper {
    width: calc(100% - 22px);
  }
}
::v-deep(.preview-dialog .el-dialog__body) {
  padding: 0;
}
</style>
